<template>
	<view :modelValue="client" class="container" >
		<!-- 导航栏 -->
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			titleStyle="{height: '52px'}" title="录入客户" @clickLeft="back">
		</uni-nav-bar>
		
		<uni-section title="客户基本信息" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" labelPosition="top" :rules="rules">
					<uni-forms-item label="客户单位" name="company" required>
						<uni-easyinput v-model="client.company" />
					</uni-forms-item>
					<uni-forms-item label="单位地址" name="address" required>
						<uni-easyinput v-model="client.address" />
					</uni-forms-item>
					<uni-forms-item label="联系人" name="person">
						<uni-easyinput v-model="client.person" />
					</uni-forms-item>
					<uni-forms-item label="联系电话" name="phone">
						<uni-easyinput v-model="client.phone" />
					</uni-forms-item>
					<uni-forms-item label="中心对接人" name="abutmentPersonName">
						<uni-combox :candidates="userNames" v-on:input="userChanged"
							v-model="client.abutmentPersonName" ></uni-combox>
					</uni-forms-item>
					<uni-forms-item label="合作类型" name="cooperationType">
						<uni-data-checkbox v-model="client.cooperationType" :localdata="taskTypes" mode="button" />
					</uni-forms-item>
					<uni-forms-item label="其他信息" name="remark">
						<uni-easyinput v-model="client.remark" />
					</uni-forms-item>
				</uni-forms>
			</view>
		</uni-section>
		<button type="primary" :loading="loading" class="submins" @click="modifySubmit()">录入</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				client: {},
				users: [],		
				userNames: [],
				taskTypes: [{ text: '检验', value: '检验' },
            { text: '技术服务', value: '技术服务' },
            { text: '科研合作', value: '科研合作' },
            { text: '其他', value: '其他' }],
				loading: false,
				rules: {
					// 对department字段进行必填验证
					company: {
						rules: [{
							required: true,
							errorMessage: '请输入单位名称',
						}]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入单位地址',
						}]
					}
				}
			}
		},
		onLoad(option) {
			this.queryUserList();
		},
		computed: {},
		methods: {
			userChanged(userName) {
				var this_ = this; //存储this
				//如果填入的用户名称非法，则主动清空内容
				var userId = this_.resolveUserIdWithSelectedUserName(userName);
			
				if (!userId) {
					this_.client.abutmentPersonName='';
				} else {
					this_.client.abutmentPerson = userId;
				}
			},
			resolveUserIdWithSelectedUserName(userName) {
				for (let index = 0; index < this.users.length; index++) {
					if (this.users[index].userName === userName) return this.users[index].userId;
				}
				return null;
			},
			queryUserList() {
				var this_ = this; //存储this

				this.$u.api.queryUserList().then((response) => {
					//这个控件只能支持字符串选取
					this_.users = response.rows;
					let userNames = [response.rows.length];
					for (let index = 0; index < response.rows.length; index++) {
						userNames[index] = response.rows[index].nickName;
					}
					this_.userNames = userNames;
				});
			},
			back() {
				this.backPageRefresh();
			},
			modifySubmit() {
				var this_ = this;
				this.$refs.baseForm.validate().then(res => {
					//先上传图片,再提交
					this.$u.api.client.add(this_.client).then(response => {
						this_.$u.toast('录入客户成功');
						this_.back();
					});
				}).catch(err => {
					console.log('表单错误信息：', err);
					this.$u.toast('必填信息不能为空');
				})
			}
		}
	}
</script>

<style>
	.uni-section {
		margin-top: 0px !important;
		background-color: #eee;
	}

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.example {
		background-color: white;
		padding: 10px 20px 15px 20px;
	}

	.segmented-control {
		margin-bottom: 10px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
